<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/weixiujihua.css">
    <link rel="stylesheet" href="../libs/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="../js/jquery-3.1.1.js"></script>
    <script src="../libs/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="../js/allData.js"></script>

</head>

<body>
    <div class="container weixiujihua">
        <div class="header">
            <h4>维修计划</h4>
            <div class="top_box clear">
                <div class="search_box">
                    <div>
                        <label for="">开始时间</label>
                        <input type="date" class="startTime">
                    </div>
                    <div>
                        <label for="">结束时间</label>
                        <input type="date" class="endTime">
                    </div>
                    <div>
                        <label for="">搜索</label>
                        <input type="text" class="danhao" onfocus="this.placeholder=''"
                            onblur="this.placeholder='请输入入库单号'" placeholder="请输入入库单号">
                    </div>
                </div>
                <div class="search_btn_box">
                    <button type="button" class="chongzhi">
                        <i class="glyphicon glyphicon-repeat"></i>
                        重置
                    </button>
                    <button type="button" class="chaxun">
                        <i class="glyphicon glyphicon-search"></i>
                        查询
                    </button>
                    <button type="button" class="xinzeng" data-toggle="modal" data-target="#myModaladd">
                        <i class="glyphicon glyphicon-plus"></i>
                        新增
                    </button>
                </div>
            </div>
        </div>


        <div class="modal fade" id="myModaladd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">新增</h4>
                    </div>
                    <div class="modal-body div2">
                        <div>
                            <label>维修单号</label> <input type="text"  id="xz1">
                        </div>
                        <div>
                            <label>装备名称</label> <input type="text" id="xz3">
                        </div>
                        <div>
                            <label>装备编号</label><input type="text" id="xz5">
                        </div>
                        <div>
                            <label>故障描述</label> <input type="text" id="xz7">
                        </div>
                        <div>
                            <label>计划时间</label> <input type="date" id="xz9">
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="queren">确认</button>
                    </div>
                </div>
            </div>
        </div>

        <table class="table">
            <thead id="thead">
                <tr>
                    <th>维修单号</th>
                    <th>装备名称</th>
                    <th>装备编号</th>
                    <th>故障描述</th>
                    <th>计划时间</th>
                    <th>操作</th>
                </tr>
            </thead>

            <tbody id="tbody">

            </tbody>
        </table>

        <div class="page_box clear">
            <div class="pageNum">
                <span>共<span>10</span>页/ <span>100</span>条数据</span>
                <div class="pageBtn_box clear">
                    <div id="preBtn" onclick="prevBtn()">
                        <i class="glyphicon glyphicon-chevron-left"></i>
                    </div>
                    <div id="pageBox">

                    </div>
                    <div id="nextBtn" onclick="nextBtn()">
                        <i class="glyphicon glyphicon-chevron-right"></i>
                    </div>
                </div>

                <div class="tiaozhuan_box">
                    <span>转至</span>
                    <input type="text" value="1" id="tiaozhuan">
                    <span>页</span>

                    <a href="#" onclick="tiaozhuan()">跳转</a>
                </div>
            </div>
        </div>

        <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">提示</h4>
                    </div>
                    <div class="modal-body">
                        <p>您确定要删除吗该条数据吗？</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="del()">确定</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <!-- 提示框 -->

        <div class="tishikuang">
            <i class="glyphicon glyphicon-ok"></i>
            删除成功
        </div>

        <!-- 登录提示弹框 -->
        <div class="modal fade" id="myModals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">温馨提示</h4>
                    </div>
                    <div class="modal-body">您还没有登录，请先登录</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary queding">确定</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

        <script>
            let user = JSON.parse(sessionStorage.getItem('user'));
            let weixiuData = JSON.parse(sessionStorage.getItem('weixiuList'))
            // console.log(weixiuData);
            if (user == null) {
                $('#myModals').modal('show')
            } else {
                $('.register_box>span').text(user.username)
            }
            $('.queding').click(function () {
                location.href = '../login.html'
            })

            let maxPage;
            let thePage = 0;
            let fenyeList = weixiuData;
            // 渲染页面
            function showTable(data) {
                $('#tbody').html('');
                $.each(data, (index, item) => {
                    $('#tbody').append(`
                    <tr>
                        <td>${item.danhao}</td>
                        <td>${item.zhuangbeiName}</td>
                        <td>${item.bianhao}</td>
                        <td>${item.guzhang}</td>
                        <td>${item.jihuaTime}</td>
                        <td>
                            <button class="btn_chakan tiaozhuan" data-item = '${JSON.stringify(item)}'>
                                <i class="glyphicon glyphicon-eye-open"></i>
                            </button>
                            <button class="btn_shanchu del" data-id = '${item.danhao}' data-item = '${JSON.stringify(item)}'>
                                <i class="glyphicon glyphicon-trash"></i>    
                            </button>
                        </td>
                    </tr>
                `)
                })
            }
            // showTable(weixiuData)



            // 根据数据源渲染每一页的数据
            function fenye(data, yema) {
                let qishiye = (yema - 1) * 8;
                let xuanranArr = data.slice(qishiye, qishiye + 8);
                showTable(xuanranArr);

                thePage = yema;

                let num = $('.pageItem').text();
                // console.log(num.length);
                for (let i = 0; i < num.length; i++) {
                    $('.pageItem').eq(i).css({
                        backgroundColor: '',
                        color: '#969494'
                    })
                }
                $('.pageItem').eq(yema - 1).css({
                    backgroundColor: '#6554C0',
                    color: '#fff'
                })
            }

            // 根据页码渲染分页按钮
            function xuanranPage(data) {
                maxPage = Math.ceil(data.length / 8);
                $('#pageBox').html('')
                for (let i = 1; i <= maxPage; i++) {
                    $('#pageBox').append(`
                    <div class='pageItem'>${i}</div>
                `)
                }
            }
            xuanranPage(weixiuData)
            fenye(weixiuData, 1)

            // 点击按钮，实现页面渲染新数据
            $('#pageBox').on('click', '.pageItem', function () {
                let num = parseInt($(this).text());
                fenye(weixiuData, num)
            })

            // 上一页
            function prevBtn() {
                if (thePage != 1) {
                    let page = thePage - 1;
                    fenye(weixiuData, page)
                }
            }

            //下一页
            function nextBtn() {
                if (thePage < maxPage) {
                    let page = thePage + 1;
                    fenye(weixiuData, page)
                }
            }

            // 跳转
            function tiaozhuan() {
                let val = document.getElementById('tiaozhuan').value;
                fenye(weixiuData, val)
            }


            // 删除
            let num = []
            $('#tbody').on('click', '.del', function () {
                var data_item = JSON.parse($(this).attr('data-item'));
                var data_id = $(this).attr('data-id');
                $('#myModal').modal('toggle')
                num.push(data_id)
            })

            function del() {
                let time
                for (let i = 0; i < fenyeList.length; i++) {
                    if (fenyeList[i].danhao == num[0]) {
                        fenyeList.splice(i, 1);
                        num = [];
                        time = setInterval(() => {
                            $('.tishikuang').css({
                                position: 'absolute',
                                top: (size[0] - 100) / 2 + 'px',
                                left: (size[1] - 300) / 2 + 'px',
                                display: 'block'
                            })
                        }, 500);
                        break;
                    }
                }
                $('#myModal').modal('hide')
                xuanranPage(fenyeList);
                fenye(fenyeList, thePage);
                setTimeout(() => {
                    clearInterval(
                        time
                    )
                    $('.tishikuang').css({
                        display: 'none'
                    })
                }, 1500);
                // console.log(fenyeList);

                if (fenyeList.length == 0) {
                    fenyeList = weixiuData
                    show(1)
                }
            }

            // 查找
            let data
            let dataTime = [] //用来装数据源里的开始时间
            let sliceTime = []; //用来装截取的时间
            $('.chaxun').click(function () {
                let startTime = $('.startTime').val();
                let endTime = $('.endTime').val();
                let danhao = $('.danhao').val();

                for (let i = 0; i < weixiuData.length; i++) {
                    let startDate = weixiuData[i].jihuaTime.slice(0, 10).replace(/\//g, '-');
                    let danData = weixiuData[i].danhao

                    if (startTime != '' && endTime == '' && danhao == '') {
                        if (startTime == startDate) {
                            sliceTime.push(weixiuData[i])
                        }
                    } else if (startTime == '' && endTime != '' && danhao == '') {
                        if (endTime == startDate) {
                            sliceTime.push(weixiuData[i])
                        }
                    } else if (startTime == '' && endTime == '' && danhao != '') {
                        if (danhao == danData) {
                            sliceTime.push(weixiuData[i])
                        }
                    } else if (startTime != '' && endTime != '' && danhao == '') {
                        let date1 = new Date(startTime)
                        let date2 = new Date(endTime)
                        let date3 = new Date(startDate)
                        if (date1.getTime() <= date3.getTime() && date3.getTime() < date2.getTime()) {
                            sliceTime.push(weixiuData[i])
                        }
                    }
                }
                fenyeList = sliceTime
                show(1)
            })

            // 重置
            $('.chongzhi').click(function () {
                fenyeList = weixiuData
                show(1)
            })

            show(1)

            function show(num) {
                xuanranPage(fenyeList);
                fenye(fenyeList, 1)
            }

            // 提示框
            let size = []

            function tishi() {
                let tishikuang = document.getElementsByClassName('tishikuang');
                let top = document.body.clientHeight
                let left = document.body.clientWidth
                size.push(top, left);
            }
            tishi()
            // console.log(size);
            $('.tishikuang').css({
                position: 'absolute',
                top: (size[0] - 100) / 2 + 'px',
                left: (size[1] - 100) / 2 + 'px',
                display: 'none'
            })


            // 查看跳转新页面
            $('.tiaozhuan').click(function () {
                location.href = './weixiujingfei_tiaozhuan.html'
            })

           
            // 新增
            $('#queren').click(function () {
                let weiixudanhao = document.getElementById('xz1').value
                let zhuangbeimingcheng = document.getElementById('xz3').value
                let zhuangbeibianhao = document.getElementById('xz5').value
                let guzhangmiaoshu = document.getElementById('xz7').value;
                let jihuashijian = document.getElementById('xz9').value;

                fenyeList.push({danhao:weiixudanhao,zhuangbeiName:zhuangbeimingcheng,bianhao:zhuangbeibianhao,guzhang:guzhangmiaoshu,jihuaTime:jihuashijian})
                console.log(fenyeList);
                $('#myModaladd').modal('hide')
                show(1)
            })
        </script>
</body>

</html>